<template>
  <div>
    <ul class="hotSearch">
      <!-- <p>热门搜索</p> -->
        <BorderTitle>热门搜索</BorderTitle>
      <li v-for="(hot, index) in HotSearch" @click="$emit('change',hot.first)" :key="index">{{ hot.first }}</li>
    </ul>
      <div style="clear:both"></div>
    
  </div>
</template>
<script>
import BorderTitle from '@/components/BorderTitle'
export default {
  name: "HotSearch",
  data() {
    return {
      HotSearch: [],
       stoageHistory: [],
    };
  },

  created() {
    this.$http.get("/search/hot").then((data) => {
      this.HotSearch = data.data.result.hots;
     
    });
  },
  
  components:{
    BorderTitle
  },
  methods:{
     empty() {
      // this.$toast.success("清空历史搜索成功");
      localStorage.removeItem("stoageHistory");
      this.stoageHistory = [];
    },
  }
};
</script>
<style lang="less" scoped>
.hotSearch {
  list-style: none;
  padding: 0;
  p{
    font-size: 15px;
    // padding: 0px;
    margin-top: 15px;
    margin-bottom: 5px;
    margin-left: 10px;
    font-weight: 600;
  }
  li {
    float: left;
    border: 1px solid #d8a9e3;
    // font-size: 16px;
    padding: 5px 10px;
    border-radius: 15px;
    margin: 5px;
    color: #333333;
  }
}
</style>